import { Tabs, DatePicker, Button } from 'antd';
import * as echarts from 'echarts';
const { TabPane } = Tabs;
//时间
import moment from 'moment';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';

import './index.less';

import { Component } from 'react';
class CounterList extends Component {
  componentDidMount() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
      title: {
        text: '折线图堆叠',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: '联盟广告',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: '视频广告',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: '直接访问',
          type: 'line',
          stack: '总量',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: '搜索引擎',
          type: 'line',
          stack: '总量',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
    option && myChart.setOption(option);
  }
  //获取时间
  getDate = (value, v2) => {
    console.log(value, v2);
  };
  //切换
  callback = (key) => {
    console.log(key);
  };
  render() {
    return (
      <div>
        <Tabs defaultActiveKey="1" onChange={this.callback}>
          <TabPane tab="概况" key="1">
            {/* 统计 */}
            <div className="rightfr">
              <Button type="primary">导出</Button>
            </div>
            <div className="shuju">数据总览：</div>
            <div className="tagCount">
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">浏览人数</div>
              </div>
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">浏览人数</div>
              </div>
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">报名人数</div>
              </div>
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">浏览人次</div>
              </div>
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">浏览人次</div>
              </div>
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">浏览人数</div>
              </div>
              <div className="tag">
                <div className="top">1000</div>
                <div className="bottom">分享人次</div>
              </div>
            </div>
            <div className="shuju">
              <div className="span">活动统计;</div>
              <div className="span">
                <RangePicker
                  format={dateFormat}
                  defaultValue={[
                    moment('2017-07-01', dateFormat),
                    moment('2017-07-07', dateFormat),
                  ]}
                  onChange={this.getDate}
                />
              </div>
            </div>
            <div id="main"></div>
          </TabPane>

          <TabPane tab="统计报名" key="2">
            aaa
          </TabPane>

          <TabPane tab="asda" key="3">
            ddd
          </TabPane>
        </Tabs>
      </div>
    );
  }
}

export default CounterList;
